<template>
    <div ref="canvas"></div>
</template>

<script setup lang="ts">
import { Chart, View, registerShape } from '@antv/g2';
import { assign } from 'lodash-es';
import { v4 } from 'uuid';
import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import { ChartCfg, Point } from '@antv/g2/lib/interface';
const prop = defineProps<{ src: string, data: number, height: number, color?: string, color2?: string, color3: string, chartCfg?: ChartCfg, text: string }>()
const tclass = v4()
const canvas = ref<HTMLDivElement>()
const chart = ref<Chart>()


function setpath(center, cfg) {

    const h = 8
    const w = 8
    const r = 25
    const r1 = Math.sqrt((cfg.x - center.x) * (cfg.x - center.x) + (cfg.y - center.y) * (cfg.y - center.y))
    const r2 = Math.sqrt((w / 2) * (w / 2) + (r1 + r - h) * (r1 + r - h))
    let s1 = Math.acos((center.x - cfg.x) / r1)

    const s2 = Math.atan((w / 2) / (r1 + r - h))
    const x1 = center.x - (r1 + r) * Math.cos(s1)
    const y1 = center.y - (r1 + r) * Math.sin(s1)
    const x2 = center.x - r2 * Math.cos(s1 + s2)
    const y2 = center.y - r2 * Math.sin(s1 + s2)
    const x3 = center.x - r2 * Math.cos(s1 - s2)
    const y3 = center.y - r2 * Math.sin(s1 - s2)

    return [
        ['M', x1, y1],
        ['L', x2, y2],
        ['L', x3, y3],
        ['L', x1, y1],
    ]
}

// 自定义Shape 部分
registerShape('point', 'pointer', {
    draw(cfg, container) {
        const group = container.addGroup();
        const center = this.parsePoint({ x: 0, y: 0 }); // 获取极坐标系下画布中心点
        group.addShape('path', {
            attrs: {
                // x1: center.x,
                // y1: center.y,
                // x2: cfg.x,
                // y2: cfg.y,
                stroke: cfg.color,
                lineWidth: 0,
                lineCap: 'butt',
                lineJoin: 'miter',
                fill: cfg.color,
                path: setpath(center, cfg)
            },
        });

        return group;
    },
});

function getprops() {
    return prop
}


const _chart = ref<View>()

function start() {
    _chart.value?.clear()
    _chart.value?.scale('value', {
        min: 0,
        max: 100,
        tickInterval: 10,

    });
    _chart.value?.coordinate('polar', {
        startAngle: Math.PI,
        endAngle: 0,
        radius: 0.9,
    });

    _chart.value?.tooltip(false)

    _chart.value?.axis('1', false);
    _chart.value?.axis('value', {
        line: null,
        label: {
            offset: -16,
            style: {
                fontSize: 0,
                textAlign: 'center',
                textBaseline: 'middle',
            },
        },
        subTickLine: {
            count: 4,
            length: -10,
        },
        tickLine: {
            length: -12,
        },
        grid: null,
    });

    _chart.value?.legend(false);
    console.log(prop.color2)
    _chart.value?.point()
        .position('value*1')
        .shape('pointer')
        .color('value', prop.color2)
        .animate({
            appear: {
                animation: 'fade-in'
            }
        });
    // _chart.value?.annotation().image({
    //     src: prop.src,
    //     top: true,
    //     start: [0, 0],
    //     end: [200, 200]
    // })
    // 绘制仪表盘背景
    _chart.value?.annotation().arc({
        top: false,
        start: [0, 1],
        end: [100, 1],
        style: {
            stroke: prop.color,
            lineWidth: 10,
            lineDash: null,
        },
    });
    // _chart.value?.annotation().arc({
    //     top: false,
    //     start: [0, 1],
    //     end: [100, 1],
    //     style: {
    //         stroke: `r(1,1,7)  0:#ffffff 1:${prop.color3}`,
    //         strokeOpacity: 0.03,
    //         lineWidth: 36,
    //         lineDash: null,
    //         shadowBlur: 100,
    //         shadowColor: prop.color3,
    //         // filter: 'blur(20)'
    //     },
    //     offsetY: 0
    // });

    // _chart.value?.annotation().arc({
    //     start: [0, 1],
    //     end: [prop.data ? prop.data : 0, 1],
    //     style: {
    //         stroke: prop.color,
    //         lineWidth: 5,
    //         lineDash: null,
    //         strokeOpacity: 0.8
    //     },
    // });
    // 绘制指标数字

    _chart.value?.annotation().text({
        position: ['50%', '90%'],
        content: `${prop.data ? prop.data.toFixed(2) : '00.00'}`,
        style: {
            fontSize: 24,
            fill: '#ffffff',
            textAlign: 'center',
            fontFamily: 'Bebas',
            fontWeight: 700
        },
        offsetY: -40,
        offsetX: -5

    });
    _chart.value?.annotation().text({
        position: ['50%', '90%'],
        content: `%`,
        style: {
            fontSize: 14,
            fill: '#ffffff',
            textAlign: 'center',
            fontFamily: 'Bebas'
        },
        offsetY: -38,
        offsetX: 35
    });
    _chart.value?.annotation().text({
        position: ['50%', '85%'],
        content: prop.text,
        style: {
            fontSize: 16,
            fill: '#ffffff',
            textAlign: 'center',
            fontFamily: 'FZZongYi-M05S'
        },
    });

    _chart.value?.render();
}


watch(() => prop.data, () => {
    _chart.value?.changeData([{ value: prop.data ? prop.data : 0, type: '速度' }]);
    // chart.value?.theme({ "styleSheet": { "brandColor": "#014c63", paletteQualitative10: prop.color, paletteQualitative20: prop.color } });
    // chart.value?.interval()
    //     .position('count')
    //     .color('name', prop.color)
    //     .label('name')
    //     .adjust('stack');
    start()
})



onMounted(() => {
    // let all = 0
    // prop.data.forEach((a) => all = a.count + all)
    if (canvas.value) {
        chart.value = new Chart(assign({
            container: canvas.value,
            autoFit: true,
            height: prop.height,
            padding: [0, 0, 30, 0],
            width: 235
        }, prop.chartCfg))
        chart.value.data([{ value: prop.data ? prop.data : 0, type: '速度' }]);
        _chart.value = chart.value.interaction(tclass);
        start()

        chart.value.render();
    }
})

// onUnmounted(() => {
//     if (_chart.value)
//         _chart.value.removeInteraction(tclass)
// })

defineExpose({
    data: _chart.value
})

</script>